<!DOCTYPE html>
<!-- 1.0 删除了 html 标签的 lang="en"，干掉浏览器多余的翻译提示 -->
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 2. 项目标题 -->
    <title>数据可视化</title>
    <!-- 3.0 引入字体图标样式 -->
    <link rel="stylesheet" href="./fonts/icomoon.css" />
    <!-- 4.0 引入自己的 CSS 文件 -->
    <link rel="stylesheet" href="./styles/Dex.css" />
  </head>
  <body>
    <!-- 1.0 头部 logo -->
    <header class="header">
      <img class="header_logo" src="./images/logo.png" alt="" srcset="" />
    </header>
    <!-- 2.0 大容器 -->
    <div class="container">
      <!-- 容器左边 -->
      <div class="container_left">
        <!-- 模块1：设备模块 -->
        <ul class="panel device">
          <li class="device_item">
            <h4>2,190</h4>
            <p><i class="icon-dot"></i><span>设备总数</span></p>
          </li>
          <li class="device_item">
            <h4>2,190</h4>
            <p><i class="icon-dot"></i><span>设备总数</span></p>
          </li>
          <li class="device_item">
            <h4>2,190</h4>
            <p><i class="icon-dot"></i><span>设备总数</span></p>
          </li>
          <li class="device_item">
            <h4>2,190</h4>
            <p><i class="icon-dot"></i><span>设备总数</span></p>
          </li>
        </ul>
        <!-- 模块2：监控 -->
        <div class="panel monitoring">
          <div class="panel_title">
            <span>故障设备监控</span>
            <span class="line"></span>
            <span class="dis_active">异常设备监控</span>
          </div>
          <div class="list_head">
            <span>故障时间</span>
            <span>设备地址</span>
            <span>异常代码</span>
          </div>
          <div class="list_body">
            <ul>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
              <li class="list_item">
                <span>20210122</span>
                <span>广州市天河区吉山村黑马程序员</span>
                <span>10086</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 模块3：点位 -->
        <div class="panel point">
          <div class="panel_title">点位分布统计</div>
          <div class="point_body">
            <div class="point_chart">饼图</div>
            <div class="rect">
              <div class="rect_item">
                <h4 class="rect_item_number">320,11</h4>
                <p class="rect_item_text">
                  <i class="icon-dot"></i><span>点位总数</span>
                </p>
              </div>
              <div class="rect_item">
                <h4 class="rect_item_number">418</h4>
                <p class="rect_item_text">
                  <i class="icon-dot"></i><span>本月新增</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 容器中间 -->
      <div class="container_center">
        <!-- 模块4：迁徙图 -->
        <h3 class="migrate_title">
          <i class="icon-cube"></i>
          <span>设备数据统计</span>
        </h3>
        <div class="migrate_map"></div>
        <!-- 模块5：用户总量统计 -->
        <div class="panel user">
          <div class="panel_title">全国用户总量统计</div>
          <div class="user_body">
            <!-- 填充图表的类名必须是不一样 -->
            <div class="user_chart">柱状图</div>
            <div class="rect">
              <div class="rect_item">
                <h4 class="rect_item_number">120,899</h4>
                <p class="rect_item_text">
                  <i class="icon-dot"></i><span>用户总量</span>
                </p>
              </div>
              <div class="rect_item">
                <h4 class="rect_item_number">248</h4>
                <p class="rect_item_text">
                  <i class="icon-dot"></i><span>本月新增</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 容器右边 -->
      <div class="container_right">
        <!-- 模块6：订单量 -->
        <div class="order panel">
          <div class="panel_title">
            <span class="dis_active">365天</span>
            <span class="line"></span>
            <span>90天</span>
            <span class="line"></span>
            <span class="dis_active">30天</span>
            <span class="line"></span>
            <span class="dis_active">24小时</span>
          </div>
          <div class="order_list">
            <div class="order_item">
              <h4 class="order_number">301,987</h4>
              <p class="order_text">
                <i class="icon-dot"></i><span>订单量</span>
              </p>
            </div>
            <div class="order_item">
              <h4 class="order_number">301,987</h4>
              <p class="order_text">
                <i class="icon-dot"></i><span>订单量</span>
              </p>
            </div>
          </div>
        </div>
        <!-- 模块7：销售额 -->
        <div class="sell panel">
          <div class="panel_title">
            <span>销售额统计</span>
            <span class="line"></span>
            <ul class="sell_date">
              <li class="active">年</li>
              <li>季</li>
              <li>月</li>
              <li>周</li>
            </ul>
          </div>
          <div class="sell_chart">折线图</div>
        </div>
        <!-- 编组 -->
        <div class="panel_group">
          <!-- 模块8：渠道 -->
          <div class="channel panel">
            <div class="panel_title">渠道分布</div>
            <div class="channel_body">
              <ul class="channel_list">
                <li class="channel_item">
                  <h4 class="channel_number">39</h4>
                  <p class="channel_text"><i class="icon-plane"></i>机场</p>
                </li>
                <li class="channel_item">
                  <h4 class="channel_number">39</h4>
                  <p class="channel_text"><i class="icon-bag"></i>商场</p>
                </li>
                <li class="channel_item">
                  <h4 class="channel_number">39</h4>
                  <p class="channel_text"><i class="icon-bus"></i>地铁</p>
                </li>
                <li class="channel_item">
                  <h4 class="channel_number">39</h4>
                  <p class="channel_text"><i class="icon-train"></i>火车站</p>
                </li>
              </ul>
            </div>
          </div>
          <!-- 模块9：进度 -->
          <div class="progress panel">
            <div class="panel_title">一季度销售进度</div>
            <div class="progress_chart"></div>
            <div class="progress_list">
              <div class="progress_item">
                <h4 class="progress_number">1,321</h4>
                <p class="progress_text">
                  <i class="icon-dot"></i>销售额(万元)
                </p>
              </div>
              <div class="progress_item">
                <h4 class="progress_number">150%</h4>
                <p class="progress_text"><i class="icon-dot"></i>同比增长</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 模块10：热榜 -->
        <div class="hot panel">
          <div class="hot_title panel_title">
            <span>全国热榜</span>
            <span>各省热销</span>
            <span class="hot_title_more">近30日</span>
          </div>
          <div class="hot_body">
            <div class="col_01">
              <div class="col_01_item">
                <i class="icon-cup1"></i>
                <span>可爱多</span>
              </div>
              <div class="col_01_item">
                <i class="icon-cup2"></i>
                <span>娃哈哈</span>
              </div>
              <div class="col_01_item">
                <i class="icon-cup3"></i>
                <span>灰太郎</span>
              </div>
            </div>
            <div class="col_02">
              <div class="col_02_item active">
                <span class="col_02_item_text">北京</span>
                <span class="col_02_item_number"
                  >25,179 <i class="icon-down"></i>
                </span>
              </div>
              <div class="col_02_item">
                <span class="col_02_item_text">上海</span>
                <span class="col_02_item_number"
                  >25,179 <i class="icon-up"></i>
                </span>
              </div>
              <div class="col_02_item">
                <span class="col_02_item_text">北京</span>
                <span class="col_02_item_number"
                  >25,179 <i class="icon-down"></i>
                </span>
              </div>
              <div class="col_02_item">
                <span class="col_02_item_text">上海</span>
                <span class="col_02_item_number"
                  >25,179 <i class="icon-up"></i>
                </span>
              </div>
              <div class="col_02_item">
                <span class="col_02_item_text">北京</span>
                <span class="col_02_item_number"
                  >25,179 <i class="icon-down"></i>
                </span>
              </div>
            </div>
            <div class="col_03">
              <div class="col_03_item">
                <span class="col_02_item_text">可爱多</span>
                <span class="col_02_item_number"
                  >5,179 <i class="icon-up"></i>
                </span>
              </div>
              <div class="col_03_item">
                <span class="col_02_item_text">小洋人</span>
                <span class="col_02_item_number"
                  >6,666 <i class="icon-up"></i>
                </span>
              </div>
              <div class="col_03_item">
                <span class="col_02_item_text">可爱多</span>
                <span class="col_02_item_number"
                  >5,179 <i class="icon-up"></i>
                </span>
              </div>
              <div class="col_03_item">
                <span class="col_02_item_text">小洋人</span>
                <span class="col_02_item_number"
                  >6,666 <i class="icon-up"></i>
                </span>
              </div>
              <div class="col_03_item">
                <span class="col_02_item_text">可爱多</span>
                <span class="col_02_item_number"
                  >5,179 <i class="icon-up"></i>
                </span>
              </div>
              <div class="col_03_item">
                <span class="col_02_item_text">小洋人</span>
                <span class="col_02_item_number"
                  >6,666 <i class="icon-up"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/echarts.min.js"></script>
  <script src="./js/china.js"></script>
  <script src="./js/index2.js"></script>
</html>
